<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app">
	  {{ message }}
	</div>
	
	<div id="app2">
		<span v-bind:title="message">
			鼠标悬停查看当前时间
		</span>
	</div>

	<div id="app3">
		<p v-if="seen">Now you see me</p>
	</div>

	<div id="app4">
		<ol>
			<li v-for="std in list">
				{{std.name}}
			</li>
		</ol>
	</div>

	<div id="app5">
		<p>{{message}}</p>
		<button v-on:click="reverMessage">Rever Message</button>
	</div>

	<div id="app6">
		<p>{{message}}</p>
		<input v-model="message" />
	</div>

	<div id="app7">
		<ol>
			<todo-item v-for="item in itemList" v-bind:todo="item"></todo-item>
		</ol>
	</div>

</body>
</html>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:'Hello vue!'
		}
	});

	var app2 = new Vue({
		el:"#app2",
		data:{
			message:new Date()
		}
	});

	var app3 = new Vue({
		el:"#app3",
		data:{
			"seen":true
		}
	});

	var app4 = new Vue({
		el:"#app4",
		data:{
			list:[
				{name:'张三'},
				{name:'李四'},
				{name:'王五'}
			]
		}
	});

	var app5 = new Vue({
		el:"#app5",
		data:{
			message:"Hello vue.js!"
		},
		methods:{
			reverMessage:function(){
				this.message = this.message.split('').reverse().join('')
			}
		}
	});

	var app6 = new Vue({
		el:"#app6",
		data:{
			message:"Hello vue"
		}
	});

	Vue.component("todo-item",{
		props:['todo'],
		template:"<li>{{todo.text}}</li>"
	});

	var app7 = new Vue({
		el:"#app7",
		data:{
			itemList:[
				{text:"春"},
				{text:"夏"},
				{text:"秋"},
				{text:"冬"}
			]
		}
	});


</script>